<script setup lang="ts">
  import { getBillInfo } from '@/api/order'
  import { ref } from 'vue'

  defineOptions({
    name: 'OrderBillInfo',
  })

  const getBillInfoLoading = ref(false)
  const info = ref<OrderBillInfo | null>({
    header: '',
    headType: 1,
    ticketMoney: 0,
    ticketTaxNumber: '',
    ticketType: 1,
    id: '',
    applyTime: '',
    openTicketTime: '',
    email: '',
    openTicketStatus: 1,
  })

  const getInfo = async (orderId: string) => {
    getBillInfoLoading.value = true
    const res = await getBillInfo(orderId)
    getBillInfoLoading.value = false
    if (res.data.code === 20000) {
      info.value = res.data.data.row
      return ''
    }
    return res.data.message
  }

  defineExpose({
    info,
    getInfo,
  })
</script>

<template>
  <div v-if="info">
    <div
      v-loading="getBillInfoLoading"
      class="bg-color-white box-border-box padding-16px flex flex-column row-gap-10px"
    >
      <header>
        <div class="title-priamry">开票信息</div>
      </header>
      <main class="p-lr-16px flex flex-wrap column-gap-64px row-gap-5px">
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票类型：</div>
          <div class="flex align-center">{{
            info.ticketType === 1 ? '增值税普通发票' : '增值税专用发票'
          }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">抬头类型：</div>
          <div class="flex align-center">{{ info.headType === 1 ? '企业' : '个人' }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">发票抬头：</div>
          <div class="flex align-center">{{ info.header }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">发票税号：</div>
          <div class="flex align-center">{{ info.ticketTaxNumber }}</div>
        </div>
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票金额：</div>
          <div class="flex align-center">￥{{ (Number(info.ticketMoney) || 0).toFixed(2) }}</div>
        </div>
        <!-- <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票状态：</div>
          <div>
            <h-status v-if="info.openTicketStatus === 2">已开票</h-status>
            <h-status v-else type="warning">未开票</h-status>
          </div>
        </div> -->
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">申请时间：</div>
          <div class="flex align-center">{{ info.applyTime }}</div>
        </div>
        <!-- <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">开票时间：</div>
          <div class="flex align-center">{{ info.openTicketTime }}</div>
        </div> -->
        <div class="flex">
          <div class="font-606266 white-nowrap flex align-center">电子邮箱：</div>
          <div class="flex align-center">{{ info.email }}</div>
        </div>
      </main>
    </div>
  </div>
</template>
